<template>
  <div id="evaluation-cpn">
    <van-popup v-model="evaluation_show" round position="bottom" :style="{ height: '8.5rem' }" @click-overlay="cancal">
      <div class="evaluation-popup">
        <div class="top-name">
          <span class="cancal" @click="cancal">取消</span>
          <span class="middle">评价</span>
          <span class="sure" @click="sure">确认</span>
        </div>
        <div class="star-pane">
          <van-icon :name="item.isShow ? 'star' : 'star-o'" v-for="(item, index) in starList" :key="index" :class="item.isShow ? 'star-icon star-icon-color' : 'star-icon'" @click="clickStar(index)" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import evaluation_popup_controller from "./evaluation_popup_controller.js";

export default evaluation_popup_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#evaluation-cpn {
  .evaluation-popup {
    padding: 0.8rem;
    height: 100%;

    .top-name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .cancal {
        font-size: 0.75rem;
        font-weight: 400;
        color: #999;
      }

      .middle {
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
      }

      .sure {
        font-size: 0.75rem;
        font-weight: 400;
        color: #333;
      }
    }

    .star-pane {
      display: flex;
      justify-content: center;
      height: 95%;
      align-items: center;

      .star-icon-color {
        color: #ff9c43 !important;
      }

      .star-icon {
        font-size: 1.1rem;
        margin-right: 1rem;
      }
    }
  }
}
</style>
